<template>
	<view class="recruit">
		<view class="max">
			<view class="top">
				<!-- <image src="../../static/images/banner.jpg" mode="aspectFill"></image> -->
				<view class="text">加入TUI学院讲师团——成就TUI专家</view>
				<button type="primary" size="mini" @click="toApply">讲师入驻申请</button>
			</view>
			<view class="content">
				<p>
					TUI学院是AAA集团旗下专注IT培训教育的知识平台，以数据科技为基础，涵盖Web开发大数据、云计算、人工智能、物联网等领域，利用碎片化时间和灵活的学习方式，助你快速充电提升竞争力，成就IT专家。
				</p>
				<p>
					课程内容包括TUI品牌线下峰会和技术沙龙所产生的原创视频、联合业界技术大咖、知名IT社区和企业精心打造的系列技术课程。涵盖技术解析、案例分享、行业应用等，以更贴近项目实战经验分享为主，持续打磨符合技术人才的精品课程。
				</p>
			</view>
			<view class="bottom">
				<view class="start">
					<view class="image">
						<uni-icons type="calendar-filled" size="55" color="#fc957f"></uni-icons>
						<image src="../../static/images/start.png" mode="widthFix"></image>
					</view>
					<view class="text">不要犹豫，不试试怎么知道你是否合适！</view>
				</view>
				<view class="process">
					<view class="block">
						<view>
							<view class="text">
								提<br />交<br />申<br />请
							</view>
							<image src="../../static/images/step-1.png" mode="heightFix"></image>
						</view>
						<view>
							<view class="text">
								官<br />方<br />审<br />核
							</view>
							<image src="../../static/images/step-2.png" mode="heightFix"></image>
						</view>
						<view>
							<view class="text">
								签<br />订<br />协<br />议
							</view>
							<image src="../../static/images/step-3.png" mode="heightFix"></image>
						</view>
						<view>
							<view class="text">
								线<br />上<br />授<br />课
							</view>
							<image src="../../static/images/step-4.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="message">
						<view class="nonormal">
							<text>进入报名页面，填写相关信息</text>
							<image src="../../static/images/btn.png" mode="widthFix" @click="toApply"></image>
						</view>
						<view class="normal">
							<text>TUI学院专人审核并进行电话沟通(5个工作日内)</text>
						</view>
						<view class="normal">
							<text>TUI学院与入住讲师签订合作协议</text>
						</view>
						<view class="normal">
							<text>审核通过后，会有专人对接课程上线事宜</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getApply
	} from '../../apis/teacher.js'
	const status = ref('yes')
	const member = uni.getStorageSync("member")
	const toApply = () => {
		const result = applyList(member.mobile);
		console.log(result)
		console.log(member)
		console.log(member.isType)
		result.then(res => {
			if (member.isType == 1) {
				uni.showToast({
					title: '您已经是讲师，无需申请',
					icon: 'none'
				})
				return;
			}
			if (res.data.data.length == 0) {
				uni.navigateTo({
					url: '/pages/teacher/apply'
				})
			} else {
				if (res.data.data[0].checkStatus == 0) {
					uni.showToast({
						title: '申请正在审核中，请耐心等待',
						icon: 'none'
					})
				} else if (res.data.data[0].checkStatus == 1) {
					uni.showToast({
						title: '申请已通过，无需申请',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/teacher/apply'
					})
				}
			}
		})
	}
	const applyList = async (phone) => {
		const result = await getApply(phone)
		return result;
	}
</script>

<style lang="scss" scoped>
	.max {
		background:
			linear-gradient(to bottom, transparent, #fff),
			linear-gradient(to right, #beecd8, #F4E2D8);
		padding: 50rpx 30rpx;

		.top {
			background-image: url('https://wzy-0523.oss-cn-qingdao.aliyuncs.com/49fa1959383d417c9a6ff48cb273c1a6banner.jpg');
			width: 100%;
			height: 400rpx;
			background-size: cover;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;

			.text {
				font-size: 40rpx;
				font-weight: 600;
				color: white;
				text-shadow: 2px 2px 5px #333333;
			}

			button {
				margin-top: 20rpx;
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				background: #fc957f;
				border-radius: 10rpx;
				color: white;
				box-shadow: 2px 2px 5px #333333;
			}

			image {
				width: 100%;
			}
		}

		.content {
			padding-top: 50rpx;

			p {
				text-indent: 2em;
				line-height: 1.5;
				font-size: 32rpx;
				color: #666;
				margin-bottom: 20rpx;
			}
		}

		.bottom {
			background: white;
			border-radius: 10rpx;
			overflow: hidden;

			.start {
				width: 100%;
				padding: 30rpx 0;
				display: flex;

				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #eee;
				border-bottom: 1px solid #eee;
				margin-top: 50rpx;

				.text {
					font-size: 32rpx;
					color: #666;
					margin-top: 20rpx;
				}

				.image {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;

					image {
						width: 50%;
					}
				}
			}

			.process {
				display: flex;
				justify-content: space-between;
				padding-top: 50rpx;

				.block {
					width: 100%;

					view {
						position: relative;

						.text {
							position: absolute;
							top: 80rpx;
							left: 60rpx;
							font-size: 35rpx;
							font-weight: 600;
							text-shadow: 2px 2px 5px #333333;
						}

						image {
							height: 300rpx;
						}
					}
				}

				.message {
					width: 100%;

					.normal,
					.nonormal {
						width: 100%;
						height: 25%;
						display: flex;
						justify-content: center;
						align-items: center;

						text {
							font-size: 30rpx;
							color: #666;
							text-align: center;
						}
					}

					.nonormal {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 80%;
						}
					}
				}
			}
		}
	}
</style>